/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		
		<!-- 新增收货地址 -->
		<view class="xzshdz">
			<text>新增收货地址</text>
		</view>
		
		
		<!-- 地址选项 -->
		<view class="address-option">
			<!-- consignee=收货人 -->
			<view class="consignee">
				<text>收货人</text>
				<input type="text" v-model="addressForm.consignee" />
			</view>
			<view class="phone">
				<text>联系电话</text>
				<input type="text" v-model="addressForm.phone" />
			</view>
			<!-- region=地区 -->
<!-- 			<view class="region">
				<text>所在地区</text>
				<view class="select">
					<text>请选择</text>
					<image src="../../../static/xiangyou11.png" mode=""></image>
				</view>
			</view> -->
			<view class="region" @click="openLevel">
				<input class="name" @click="openLevel"  disabled placeholder="*请选择省市区" />
				<input class="name"  v-model="addressForm.shengShiQu" disabled="true" v-if="addressForm.shengShiQu"/>
				<w-picker
					:visible.sync="visible"
					mode="region"
					default-type="id"
					:default-props="defaultProps1"
					@confirm="onConfirm($event,'region')"
					@cancel="onCancel"
					ref="region"
				></w-picker>
			</view>
			<view class="xxdz">
				<text>详细地址</text>
				<textarea v-model="addressForm.detailsAddress" />
			</view>
		</view>
		
		<!-- 默认地址 -->
		<view class="default-address">
			<text>设为默认地址</text>
			<checkbox-group @change="checkedChange">
				<label>
					<checkbox :checked="checked" />
				</label>
			</checkbox-group>
		</view>
	
	
	<!-- 保存 -->
	<view class="baocun">
		<text @click="preserve">保存</text>
	</view>
	
		
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {checkUserinfo} from '@/request/checkUserinfo';
	export default {
		components: {
			wPicker,
		},
		data() {
			return {
				addressForm: {
					consignee: '', // 收件人
					phone: '', // 收件人电话
					shengShiQu: '',
					areacode:'',
					detailsAddress: '', // 详细地址
					isDefault: 0,
					addressId: 0
				},
				value3: [],
				label3: '',
				checked: false,
				addressList: [],
				visible:false,
			};
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad(e) {
			checkUserinfo();
			if(e.id!='' && e.id!= null && e.id){
				this.getaddress(e.id)
			}
		},
		methods: {
			getaddress(id){
				const BASE_URL=uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/get_address',
					data: {id:id},
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						this.addressForm.consignee=res.data.data.shr_name
						this.addressForm.phone=res.data.data.phone
						this.addressForm.shengShiQu=res.data.data.area
						this.addressForm.areacode=res.data.data.areacode
						this.addressForm.detailsAddress=res.data.data.address
						this.addressForm.isDefault=res.data.data.is_mr
						this.addressForm.addressId=res.data.data.id
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
		  handleTap (picker) {
		    this.$refs[picker].show()
				console.log(picker)
		  },
		  // handleChange (e) {
		  //   console.log('change::', e)
		  // },
			handleConfirm (e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.map(m => m.label).join('-')
					const areacode = e.item.map(m => m.value).join(',')
					this.addressForm.shengShiQu = label
					this.addressForm.areacode = areacode
					if (name && label) {
						this[name] = label
						console.log(this[name])
					}
				}
		  },
		  openLevel() {
		  	this.visible=true;
		  },
		  onCancel(){
		  	this.visible=false;
		  },
		  onConfirm(e) {
		  	// e 确认后选中的数据
		  	// console.log(e)
		  	this.addressForm.shengShiQu=e.result;
		  	this.addressForm.areacode = e.value.toString();
		  	console.log(this.addressForm.shengShiQu,this.addressForm.areacode)
		  },
			// checked变化
			checkedChange () {
				this.checked = !this.checked
			},
			// 保存信息
			preserve () {
				if(this.checked) {
					this.addressForm.isDefault = 1
				}else{
					this.addressForm.isDefault = 0
				}
				if(this.addressForm.consignee==''){
					uni.showToast({
						title:'收件人不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.phone==''){
					uni.showToast({
						title:'收件人电话不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.shengShiQu==''){
					uni.showToast({
						title:'所在地区不能为空！',
						icon:'none'
					})
					return false
				}
				if(this.addressForm.detailsAddress==''){
					uni.showToast({
						title:'详细地址不能为空！',
						icon:'none'
					})
					return false
				}
				const userinfo_check = uni.getStorageSync('userinfo');
				let uid=userinfo_check.uid
				var data={
					uid:uid,
					id:this.addressForm.addressId,
					shr_name:this.addressForm.consignee,
					phone:this.addressForm.phone,
					areacode:this.addressForm.areacode,
					area:this.addressForm.shengShiQu,
					address:this.addressForm.detailsAddress,
					is_mr:this.addressForm.isDefault
				}
				const BASE_URL=uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/add_address',
					data: data,
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						if(res.data.code=="0"){
							uni.showToast({
								title: res.data.msg,
								duration: 1500
							});
							uni.navigateTo({
								url:'/pages/mall/shipping-address/shipping-address'
							})
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'none'
							});
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			}
		}
	}
	
</script>

<style lang="less" scoped>
	
@import './address.less';

</style>
